<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form id="py">
    <input type="button" value="变宽" onclick="c_width()" />
    <input type="button" value="变高" onclick="c_height()" />
    <input type="button" value="变色" onclick="c_color()" />
    <input type="button" value="隐藏" onclick="c_hide()" />
    <input type="button" value="重置" onclick="c_reset()" />
    <div id="py2"></div>
  </form>
  <script type="text/javascript">
    var c_b = document.getElementById("py2");
    function c_width() {
      c_b.style.width = "200px";
    }
    function c_height() {
      c_b.style.height = "200px";
    }
    function c_color() {
      c_b.style.backgroundColor = "pink";
    }
    function c_hide() {
      c_b.style.visibility = "hidden";
    }
    function c_reset() {
      c_b.style.cssText = "background-color: black; width: 100px; height: 100px;";
    }

  </script>
</body>
<style>
  .py {
    width: 500px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .py2 {
    background-color: black;
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
</style>

</html>